<template>
  <div>
    <!--    <el-input style="width: 200px; margin: 0 10px" placeholder="请输入菜单名" suffix-icon="el-icon-search"-->
    <!--              v-model="name"/>-->

    <!--        <el-button type="primary" @click="search">搜索</el-button>-->
    <!--    <div>-->
    <!--      <el-button size="small" plain type="primary" style="margin: 10px" @click="groupFormVisible = true">新增菜单分组<i-->
    <!--          class="el-icon-circle-plus"></i></el-button>-->
    <!--    </div>-->



    <el-dialog title="添加菜单" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="saverules" ref="saveform" label-width="80px">
        <el-form-item label="菜单名" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单path" :label-width="formLabelWidth" prop="path">
          <el-input v-model="form.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件" :label-width="formLabelWidth" prop="pagefile">
          <el-input v-model="form.pagefile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重定向" :label-width="formLabelWidth" prop="redirect">
          <el-input v-model="form.redirect" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分组" :label-width="formLabelWidth">
          <el-select v-model="form.groupid" placeholder="请选择" disabled="disabled">
            <el-option
                v-for="item in groups"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单栏" :label-width="formLabelWidth" prop="show">
          <el-select v-model="form.show" autocomplete="off">
            <el-option
                label="yes"
                :value="1">
            </el-option>
            <el-option
                label="no"
                :value="0">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需要超级权限" :label-width="formLabelWidth">
          <el-radio-group v-model="form.needsuper">
            <el-radio label="true">是</el-radio>
            <el-radio label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="序号" :label-width="formLabelWidth" prop="xh">
          <el-input v-model="form.xh" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑菜单" :visible.sync="dialogEditFormVisible">
      <el-form :model="editForm" :rules="editrules" ref="editform" label-width="80px">
        <el-form-item label="菜单名" :label-width="formLabelWidth">
          <el-input v-model="editForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单path" :label-width="formLabelWidth" prop="path">
          <el-input v-model="editForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件" :label-width="formLabelWidth">
          <el-input v-model="editForm.pagefile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重定向" :label-width="formLabelWidth">
          <el-input v-model="editForm.redirect" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分组" :label-width="formLabelWidth">
          <el-select v-model="editForm.groupid" placeholder="请选择" disabled="disabled">
            <el-option
                v-for="item in groups"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单栏" :label-width="formLabelWidth" prop="show">
          <el-select v-model="editForm.show" autocomplete="off">
            <el-option
                label="yes"
                :value="true">
            </el-option>
            <el-option
                label="no"
                :value="false">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需要超级权限" :label-width="formLabelWidth">
          <el-radio-group v-model="editForm.needsuper">
            <el-radio :label="true" >是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="序号" :label-width="formLabelWidth" prop="xh">
          <el-input v-model="editForm.xh" autocomplete="off"></el-input>
        </el-form-item>
        <!--        <el-form-item>-->
        <!--          <el-button type="primary" @click="handleEdit">提交</el-button>-->
        <!--          <el-button @click="dialogEditFormVisible = false">取 消</el-button>-->
        <!--        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog title="添加子菜单" :visible.sync="addChildMenuFormVisible">
      <el-form :model="childForm" :rules="childrules" ref="childform" label-width="80px">
        <el-form-item label="菜单名" :label-width="formLabelWidth">
          <el-input v-model="childForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="菜单path" :label-width="formLabelWidth" prop="path">
          <el-input v-model="childForm.path" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="组件" :label-width="formLabelWidth">
          <el-input v-model="childForm.pagefile" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="重定向" :label-width="formLabelWidth">
          <el-input v-model="childForm.redirect" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分组" :label-width="formLabelWidth">
          <el-select v-model="childForm.groupid" placeholder="请选择" disabled="disabled">
            <el-option
                v-for="item in groups"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="菜单栏" :label-width="formLabelWidth" prop="show">
          <el-select v-model="childForm.show" autocomplete="off">
            <el-option
                label="yes"
                :value="true">
            </el-option>
            <el-option
                label="no"
                :value="false">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="需要超级权限" :label-width="formLabelWidth">
          <el-radio-group v-model="childForm.needsuper">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="序号" :label-width="formLabelWidth" prop="xh">
          <el-input v-model="childForm.xh" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addChildMenuFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addChildMenu()">确 定</el-button>
      </div>
    </el-dialog>

    <!--    <el-table-->

    <!--        :data="groups"-->
    <!--        row-key="id"-->
    <!--        style="margin: 10px; width: 1600px" border stripe>-->
    <!--      <el-table-column type="index" label="序号" width="50">-->
    <!--      </el-table-column>-->
    <!--      &lt;!&ndash;      <el-table-column prop="id" label="ID" width="300">&ndash;&gt;-->
    <!--      &lt;!&ndash;      </el-table-column>&ndash;&gt;-->
    <!--      <el-table-column prop="name" label="菜单组名" width="244">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="routepath" label="path" width="244">-->
    <!--      </el-table-column>-->
    <!--      <el-table-column prop="address" label="操作">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button size="small" plain type="primary" @click="showEidtMenuForm(scope.row)">编辑<i-->
    <!--              class="el-icon-edit"></i></el-button>-->
    <!--          <el-popconfirm-->
    <!--              style="margin: 0 10px"-->
    <!--              confirm-button-text='确定'-->
    <!--              cancel-button-text='取消'-->
    <!--              icon="el-icon-info"-->
    <!--              icon-color="red"-->
    <!--              title="确定删除吗？"-->
    <!--              @confirm="handleDel(scope.row.id)"-->
    <!--          >-->
    <!--            <el-button size="small" plain type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i>-->
    <!--            </el-button>-->

    <!--          </el-popconfirm>-->


    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->

<!--    <el-button size="small" type="primary" plain @click="$router.back()">返回</el-button>-->
    <el-button size="small" plain type="primary" style="margin: 10px" @click="showNewForm()" :disabled="currentUser.superadmin==null || currentUser.superadmin==false">新增根菜单<i
        class="el-icon-circle-plus"></i></el-button>

    <el-table

        :data="tableData"
        row-key="id"

        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"

        style="margin: 10px; width: 1600px" border stripe>
      <el-table-column type="index" label="序号" width="50">
      </el-table-column>
      <!--      <el-table-column prop="id" label="ID" width="300">-->
      <!--      </el-table-column>-->
      <el-table-column prop="name" label="菜单名" width="244">
      </el-table-column>
      <el-table-column prop="path" label="菜单路径" width="200">
      </el-table-column>
      <el-table-column prop="pagefile" label="菜单组件" width="150">
      </el-table-column>
      <el-table-column prop="redirect" label="重定向" width="150">
      </el-table-column>
      <el-table-column prop="tjMenugroup.name" label="分组" width="150">
      </el-table-column>
      <el-table-column prop="show" label="菜单栏显示" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.show == null ?  null : (scope.row.show == true ?'Yes' : 'No' )}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="needsuper" label="超级权限" width="50">
        <template slot-scope="scope">
          <span>{{ scope.row.needsuper == null ?  null : (scope.row.needsuper == true ?'Yes' : 'No' )}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="xh" label="排序" width="100">
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">

          <el-button size="small" plain type="primary" @click="showAddChildMenuForm(scope.row)" :disabled="currentUser.superadmin==null || currentUser.superadmin==false">添加子菜单<i
              class="el-icon-edit"></i>
          </el-button>
          <el-button size="small" plain type="primary" @click="showEidtMenuForm(scope.row)" :disabled="currentUser.superadmin==null || currentUser.superadmin==false">编辑<i
              class="el-icon-edit"></i></el-button>
          <el-popconfirm
              style="margin: 0 10px"
              confirm-button-text='确定'
              cancel-button-text='取消'
              icon="el-icon-info"
              icon-color="red"
              title="确定删除吗？"
              @confirm="handleDel(scope.row.id)"
          >
            <el-button size="small" plain type="danger" slot="reference" :disabled="currentUser.superadmin==null || currentUser.superadmin==false">删除<i class="el-icon-remove-outline"></i>
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="padding: 5px">

      <!--      <el-pagination-->

      <!--          @size-change="handleSizeChange"-->
      <!--          @current-change="handleCurrentChange"-->
      <!--          :current-page="currentPage"-->
      <!--          :page-sizes="[10, 20, 50, 100]"-->
      <!--          :page-size="pageSize"-->
      <!--          layout="total, sizes, prev, pager, next, jumper"-->
      <!--          :total="total">-->
      <!--      </el-pagination>-->
    </div>
  </div>
</template>
<script>
import service from "@/utils/request";
import ElementUI from "element-ui";

export default {
  created() {
    this.load();
    this.tableData = []
    this.currentUser = JSON.parse(sessionStorage.getItem('user'))


  },
  data() {


    return {

      // tableData: Array(15).fill(item),
      currentUser: null,
      groups: [],
      groupmenu: {},
      tableData: [],
      pageSize: 10,
      total: 100,
      currentPage: 1,
      name: null,
      path: null,
      groupFormVisible: false,
      dialogFormVisible: false,
      dialogEditFormVisible: false,
      addChildMenuFormVisible: false,
      groupform: {
        name: '',
        routepath: '',
      },
      form: {
        name: '',
        path: '',
        pagefile: '',
        redirect: '',
        pid: null,
        groupid: null,
        tjMenugroup: {
          id: null,
          name: null
        },
        show: null,
        needsuper: false,

        xh: null
      },
      saverules: {
        path: [
          {required: true, message: '请输入路径', trigger: 'blur'},
          // {pattern: /^\w+/, message: '必须是路径', trigger: 'blur'}
        ],
        xh: [
          {required: true, message: '请输入排序序号', trigger: 'blur'},
          {pattern: /^\d+$/, message: '必须是整数', trigger: 'blur'}
        ]
      },
      editForm: {
        id: null,
        name: '',
        path: '',
        pagefile: '',
        redirect: '',
        pid: null,
        groupid: null,
        tjMenugroup: {
          id: null,
          name: null
        },
        show: null,
        needsuper: false,
        xh: null
      },
      editrules: {
        path: [
          {required: true, message: '请输入路径', trigger: 'blur'},

        ],
        xh: [
          {required: true, message: '请输入排序序号', trigger: 'blur'},
          {pattern: /^\d+$/, message: '必须是整数', trigger: 'blur'}
        ]
      },
      childForm: {
        name: '',
        path: '',
        pagefile: '',
        redirect: '',
        pid: null,
        show: null,
        needsuper: false,
        xh: null
      },
      childrules: {
        path: [
          {required: true, message: '请输入路径', trigger: 'blur'},
          // {pattern: /^\w+/, message: '必须是路径', trigger: 'blur'}
        ],
        xh: [
          {required: true, message: '请输入排序序号', trigger: 'blur'},
          {pattern: /^\d+$/, message: '必须是整数', trigger: 'blur'}
        ]
      },
      formLabelWidth: '120px'
    }
  },
  methods: {

    load() {
      service.get('/menugroup', {}).then(response => {
            if (response.data.code == 20000) {
              this.groups = response.data.data
              for(let i=0; i<this.groups.length; i++){
                if(this.groups[i].id == this.$route.query.id){
                  this.groupmenu = this.groups[i]
                }
              }
            }
          }, error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      )
      service.get('/menu/getListByGroupid', {
        params: {
          groupid: this.$route.query.id
        }
      }).then(response => {
            if (response.data.code == 20000) {
              this.tableData = response.data.data
            }
          },
          error => {
            ElementUI.Message({
              message: error.message,
              type: 'error'
            })
          }
      )
      // service.get('/menu/getpage', {
      //   params: {
      //     pageSize: this.pageSize,
      //     pageNum: this.currentPage,
      //
      //     description: this.description
      //   }
      // }).then(response => {
      //       if (response.data.code == 20000) {
      //         this.tableData = response.data.data.records;
      //         this.total = response.data.data.total;
      //         this.currentPage = response.data.data.current;
      //         this.pageSize = response.data.data.size;
      //       }
      //     },
      //     error => {
      //       ElementUI.Message({
      //         message: error.message,
      //         type: 'error'
      //       })
      //     }
      // );

    },
    showNewForm(){
      this.dialogFormVisible = true
      if (this.groupmenu) {
        this.form.groupid = this.groupmenu.id
      }

    },
    showAddChildMenuForm(row) {
      this.childForm.pid = row.id
      this.childForm.groupid = row.groupid
      this.addChildMenuFormVisible = true
    },
    showEidtMenuForm(row) {
      this.dialogEditFormVisible = true
      if (row) {
        this.editForm.id = row.id
        this.editForm.name = row.name
        this.editForm.path = row.path
        this.editForm.pagefile = row.pagefile
        this.editForm.redirect = row.redirect
        this.editForm.pid = row.pid
        this.editForm.groupid = row.groupid
        this.editForm.show = row.show
        this.editForm.xh = row.xh
        this.editForm.needsuper = row.needsuper
      }

    },

    addChildMenu(row) {
      this.$refs.childform.validate(valid => {
        if (!valid) {
          return;
        }
        service.post('/menu', this.childForm).then(response => {
          if (response.data.code == 20000) {
            this.$message.success('添加成功!');
            this.addChildMenuFormVisible = false
            this.load()
          } else {
            this.$message.error(response.data.message);
          }
        }).catch(error => {
          this.$message.error(error.message);
        })

      })


    },
    handleSizeChange(val) {
      this.pageSize = val
      this.load()
    }
    ,
    handleCurrentChange(val) {
      this.currentPage = val
      this.load()
    },
    handleGroupSave() {
      this.$refs.groupform.validate(valid => {
        if (!valid) {
          return;
        }
        service.post('/menugroup/save', this.groupform).then(response => {
          if (response.data.code == 20000) {
            this.groupFormVisible = false
            this.load()
            this.$message.success('添加成功!');
          } else {
            this.$message.error(response.data.message);
          }
        })
      })
    },

    handleSave() {
      this.$refs.saveform.validate(valid => {
        if (!valid) {
          return;
        }
        service.post('/menu', this.form).then(response => {
          if (response.data.code == 20000) {
            this.$message.success('添加成功!');
            this.dialogFormVisible = false
            this.load()
          } else {
            this.$message.error(response.data.message);
          }
        }).catch(error => {
          this.$message.error(error.message);
        })
      })

    }
    ,

    handleEdit() {
      this.$refs.editform.validate(valid => {
        if (!valid) {
          return;
        }
        service.post('/menu/edit', this.editForm).then(response => {
          if (response.data.code == 20000) {
            this.dialogEditFormVisible = false
            this.load()
            this.$message.success('修改成功!');
          } else {
            this.$message.error(response.data.message);
          }
        }).catch(error => {
          this.$message.error(error.message);
        })
      })
    }
    ,

    handleDel(id) {
      service.delete('/menu?id=' + id).then(response => {
        if (response.data.code == 20000) {
          this.$message.success('删除成功!');
          this.load()
        } else {
          this.$message.error('删除失败！');
        }
      })
    }
    ,

    search() {
      // if(!this.population.isInteger){  //不能这么判断

      this.currentPage = 1
      this.load()
    }
    ,

    handleDelBatch() {
      console.log(this.$route)
      // console.log(this.$router)
    }
    ,
// validatePopulation(){
//   if(!Number.isInteger(this.population)){
//     this.$message.info('notInteger')
//     this.$message.info(this.population)
//     // this.population = 0
//   }else{
//     this.$message.info('isInteger')
//
//   }


  }
}
</script>

<style scoped>

</style>
